<template>
<view class="page">
	<!-- 个人资料 -->
	<view class="top">

		<view class="top-bg" :style="{backgroundImage:bgheadSrc}">
			<view class="person">
				<view class="person-right">
						<u-avatar size="96" class="avatar"  @click="toEditInfoPage" :src="myuserinfo.headimgurl" :show-level="myuserinfo.rank>0"></u-avatar>
					<view class="personInfo u-flex u-row-between" v-if="isLogin">
						<view>
							<h3 class="colorWhite userName" style="{font-weight:500}">{{myuserinfo.user_name}}</h3>
							<view class="u-font-xs">
								<u-tag :text="getRankName" v-if="false" shape="circle" size="mini" type="warning"
											 mode="dark" />
								<u-tag :text="roleName[role]" v-if="roleName[role]" shape="circle" size="mini"
											 type="warning" />
							</view>
						</view>
						<div style="margin-top: 60upx">
								<span @click="$u.route('/pagesB/message/message')">
									<u-icon :name="imgStaticUrl+'/images/icon-newsWhite.png'" size="42"></u-icon>
								</span>
							<span @click="$u.route('/pagesB/setting/setting',{userInfo:myuserinfo})">
									<u-icon name="setting" class="u-m-l-20" color="#fff" size="54"></u-icon>
								</span>
						</div>
					</view>
					<!--  #ifndef  MP-WEIXIN -->
					<view class="login f34 c3 colorWhite" v-if="!isLogin"
								@click="navigateTo('/pagesB/login/login')">{{$t('登录')}}/{{$t('注册')}}</view>
					<!--  #endif -->
					<!--  #ifdef  MP-WEIXIN -->
					<u-button size="mini" style="margin:0 30upx " shape="circle" type="success" v-if="!isLogin"
										lang="zh_CN" @click="wechatLogin">{{$t('快捷登录')}}
					</u-button>
					<!--  #endif -->

				</view>


				<!-- 在小程序里调试用  打开  -->

			</view>

			<view class="topPanelWrap" v-if="false">
				<div>
					<h3 class="topPanelNum">0</h3>
					<p>{{$t('收藏夹')}}</p>
				</div>
				<div>
					<h3 class="topPanelNum">0</h3>
					<p>{{$t('关注的店铺')}}</p>
				</div>
				<div>
					<h3 class="topPanelNum">0</h3>
					<p>{{$t('足迹')}}</p>
				</div>
				<div @click="$u.route({url:'/pagesC/order/allOrder',params:{index:6}})">
					<h3 class="topPanelNum">0</h3>
					<p>{{$t('全部订单')}}</p>
				</div>
			</view>


		</view>
	</view>


	<div class="integralBox">
		<div class="left integralBoxitem" @click="navigateTo('/pagesB/coupon/coupon')">
			<h4 class="integralBoxtitle">{{$t('优惠券')}}</h4>
			<p class="integralBoxtip">{{$t('领券')}}</p>
			<u-icon class="integralBoxicon" v-if="cosUrl" :name="cosUrl+'images/icon-wallet2.png'" color="#2979ff"
							size="88">
			</u-icon>
		</div>
		<div class="right integralBoxitem" @click="$u.route({url:'/pagesC/integral/index',params:{index:6}})">
			<h4 class="integralBoxtitle">{{$t('积分商城')}}</h4>
			<p class="integralBoxtip">{{$t('积分优惠')}}</p>
			<u-icon class="integralBoxicon" v-if="cosUrl" style="right:10upx"
							:name="cosUrl+'images/img-scoreGIft.png'" color="#2979ff" size="138"></u-icon>
		</div>
	</div>

	<!-- 我的订单 -->
	<view class="box">
		<view class="innerBox">
			<view class="order-title">
				<view class="left">{{$t('我的订单')}}</view>
				<view class="right" @click="order('/pagesC/order/allOrder')">{{$t('查看全部')}}<u-icon name="arrow-right"
																																															 size="24"></u-icon>
				</view>
			</view>
			<view class="Orderlist">
				<view class="item" @click="order('/pagesC/order/allOrder',{index:1})">
					<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.pay_num> 0">{{myuserinfo.pay_num}}</view> -->

					<view class="icon">
						<image :src="imgStaticUrl+'/images/icon-myWaitPay.png'"></image>
						<u-badge :count="myuserinfo && myuserinfo.pay_num > 0 ? myuserinfo.pay_num : 0"
										 size="default" type="error" :offset="[-10,-10]"></u-badge>
					</view>
					<view class="text f24 c6">{{$t('待付款')}}</view>
				</view>
				<view class="item" @click="order('/pagesC/order/allOrder',{index:2})">
					<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.send_num > 0">{{myuserinfo.send_num}}</view> -->

					<view class="icon">
						<image src="/static/images/icon-myWaitDeliver.png"></image>
						<u-badge :count="myuserinfo && myuserinfo.send_num > 0 ? myuserinfo.send_num : 0"
										 size="default" type="error" :offset="[-10,-10]"></u-badge>
					</view>
					<view class="text f24 c6">{{$t('待发货')}}</view>
				</view>
				<view class="item" @click="order('/pagesC/order/allOrder',{index:3})">
					<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.shou_num > 0">{{myuserinfo.shou_num}}</view> -->

					<view class="icon">
						<image :src="imgStaticUrl+'/images/icon-myTakeGoods.png'"></image>
						<u-badge :count="myuserinfo && myuserinfo.shou_num > 0 ? myuserinfo.shou_num : 0"
										 size="default" type="error" :offset="[-10,-10]"></u-badge>
					</view>
					<view class="text f24 c6"> {{$t('待收货')}}</view>
				</view>
				<view class="item" @click="order('/pagesC/order/allOrder',{index:4})">
					<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.ping_num > 0">{{myuserinfo.ping_num}}</view> -->
					<view class="icon">
						<image :src="imgStaticUrl+'/images/icon-myWaitComment.png'"></image>
						<u-badge :count="myuserinfo && myuserinfo.ping_num > 0 ? myuserinfo.ping_num : 0"
										 size="default" type="error" :offset="[-10,-10]"></u-badge>
					</view>
					<view class="text f24 c6">{{$t('待评价')}}</view>
				</view>
				<view class="item" @click="navigateTo('/pagesC/order/refundList')">
					<!-- <view class="orderMarkNum" v-if="myuserinfo && myuserinfo.huan_num>0">{{myuserinfo.huan_num}}</view> -->

					<view class="icon">
						<image src="/static/images/icon-myWaitReturn.png"></image>
						<u-badge :count="myuserinfo && myuserinfo.huan_num > 0 ? myuserinfo.huan_num : 0"
										 size="default" type="error" :offset="[-10,-10]"></u-badge>
					</view>
					<view class="text f24 c6">{{$t('售后')}}</view>
				</view>

			</view>
		</view>
	</view>

	<!-- 我的服务 -->
	<view class="box u-m-t-15" v-if="myuserinfo.is_distribution">
		<view class="innerBox">
			<view class="Orderlist">
				<view class="item" @click="navigateTo('/pagesB/distribution/income',1)">
					<view class="icon">
						<image src="../../static/images/service_1.png"></image>
					</view>
					<view class="text f24 c6">{{$t('我的分销')}}</view>
				</view>
				<view class="item" @click="navigateTo('/pagesB/distribution/myTeam')">
					<view class="icon">
						<image src="../../static/images/service_2.png"></image>
					</view>
					<view class="text f24 c6">{{$t('我的团队')}}</view>
				</view>
				<view class="item" @click="navigateTo('/pagesB/distribution/commissionList')">
					<view class="icon">
						<image src="../../static/images/service_3.png"></image>
					</view>
					<view class="text f24 c6">{{$t('佣金明细')}}</view>
				</view>
				<view class="item" @click="navigateTo('/pagesB/distribution/withdrawList')">
					<view class="icon">
						<image src="../../static/images/service_4.png"></image>
					</view>
					<view class="text f24 c6">{{$t('提现明细')}}</view>
				</view>
			</view>
		</view>
	</view>
	<!--  轮播活动页-->
	<div class="distributorWrap">
		<u-image :src="getapplyDistributorBanner" v-if="myuserinfo.is_distribution===0"
						 @click="$u.route('/pagesB/distribution/applyDistributort')" width="100%" height="200"
						 border-radius="20"></u-image>
		<button class="inviteBtn" v-else @click="goShare">
			<u-image :src="getImgInviteBanner" width="100%" height="200"></u-image>
		</button>
	</div>
	<!-- 必备工具 -->
	<view class="box ">
		<view class="innerBox tools">
			<view class="toolsList">
				<!-- <view class="toolsItem"
          @click="$u.route({url:'/pagesB/shortVideo/postVideo',params:{shop_id:myuserinfo.shop_id}})" >
          <view class="icon">
            <image src="../../static/images/service5.png"></image>
          </view>
          <view class="text f24 c3">{{$t('发布短视频')}}</view>
        </view> -->
				<view class="toolsItem" @click="confirm"
							v-if="!myuserinfo.rz_zt && myuserinfo.shop_id != 1 && showMutipleShopper">
					<view class="icon">
						<image v-if="cosUrl" :src="cosUrl+ '/images/icon-openShop.png'"></image>
					</view>
					<view class="text f24 c3">{{$t('我要开店')}}</view>
				</view>

				<!--          <view class="toolsItem" @click="$u.route({url:'/pagesB/seller/index',params:{shop_id:myuserinfo.shop_id}})" v-if="myuserinfo.rz_zt || myuserinfo.shop_id == 1">
                    <view class="icon">
                      <image src="../../static/images/icon-shopper.png"></image>
                    </view>
                    <view class="text f24 c3">{{$t('商家管理')}}</view>
                  </view> -->


				<view class="toolsItem" v-if="myuserinfo.rz_zt || myuserinfo.shop_id == 1">
					<!-- 用户安装了商家管理后台 -->
					<view class="icon" @click="getWebviewPage()" style="margin:0 auto" v-if="myuserinfo.plugin_shopapi==1">
						<image src="../../static/images/icon-shopper.png"></image>
					</view>
					<!-- 用户没有安装了商家管理后台 -->
					<view class="icon" @click="$u.route({url:'/pagesB/seller/index',params:{shop_id:myuserinfo.shop_id}})" style="margin:0 auto" v-else>
						<image src="../../static/images/icon-shopper.png"></image>
					</view>
					<view class="text f24 c3">{{$t('商家管理')}}</view>
				</view>



				<view class="toolsItem" @click="toLive(myuserinfo.shop_id)" v-if="myuserinfo.rz_zt || myuserinfo.shop_id == 1">
					<view class="icon">
						<image src="@/static/images/service1.png"></image>
					</view>
					<view class="text f24 c3">{{$t('我要直播')}}</view>
				</view>


				<view class="toolsItem" @click="navigateTo('/pagesB/distribution/applyDistributort')">
					<view class="icon">
						<image :src="imgStaticUrl+'/images/fenxiao.png'"></image>
					</view>
					<view class="text f24 c3">{{$t('申请分销商')}}</view>
				</view>

				<view class="toolsItem" @click="navigateTo('/pagesC/wallet/wallet')">
					<view class="icon">
						<image src="../../static/images/icon7.png"></image>
					</view>
					<view class="text f24 c3">{{$t('我的钱包')}}</view>
				</view>
				<view class="toolsItem" @click="navigateTo('/pagesB/my/address')">
					<view class="icon">
						<image src="../../static/images/icon2.png"></image>
					</view>
					<view class="text f24 c3">{{$t('收货地址')}}</view>
				</view>
				<view class="toolsItem" @click="navigateTo('/pagesB/comment/myGoodsCommentList')">
					<view class="icon">
						<image src="../../static/images/img/ds2.png"></image>
					</view>
					<view class="text f24 c3">{{$t('我的评价')}}</view>
				</view>
				<view class="toolsItem" @click="navigateTo('/pagesB/member/member')">
					<view class="icon">
						<image src="../../static/images/icon1.png"></image>
					</view>
					<view class="text f24 c3">{{$t('会员权益')}}</view>
				</view>


<!--				<view class="toolsItem" @click="showPopUpBox()">-->
				<view class="toolsItem" @click="openCompanyWechatService()">
					<view class="icon">
						<image src="../../static/images/icon9.png"></image>
					</view>
					<view class="text f24 c3">{{$t('客服热线')}}</view>
				</view>
				<view class="toolsItem" @click="navigateTo('/pagesB/my/signin')">
					<view class="icon">
						<image src="../../static/images/icon-punchCard.png"></image>
					</view>
					<view class="text f24 c3">{{$t('签到')}}</view>
				</view>

				<view class="toolsItem" @click="navigateTo('/pagesB/my/feedback')">
					<view class="icon">
						<image src="../../static/images/icon4.png"></image>
					</view>
					<view class="text f24 c3">{{$t('投诉建议')}}</view>
				</view>
				<view class="toolsItem" @click="goArticle('/pagesB/article/detail','购买帮助')">
					<view class="icon">
						<image src="../../static/images/icon10.png"></image>
					</view>
					<view class="text f24 c3">{{$t('购买帮助')}}</view>
				</view>
				<view class="toolsItem" @click="goArticle('/pagesB/article/detail','关于我们')">
					<view class="icon">
						<image src="../../static/images/icon8.png"></image>
					</view>
					<view class="text f24 c3">{{$t('关于我们')}}</view>
				</view>


				<view class="toolsItem" @click="$u.route('/pagesB/setting/setting')">
					<view class="icon">
						<image src="../../static/images/icon8.png"></image>
					</view>
					<view class="text f24 c3">{{$t('设置')}}</view>
				</view>


				<view class="toolsItem" @click="$u.route('/pagesC/order/checkorder')" v-if="myuserinfo.shop_storestaff">
					<view class="icon">
						<image src="https://de.ccbnd.net/jtwj/xcx/icon13.png"></image>
					</view>
					<view class="text f24 c3">{{$t('核销')}}</view>
				</view>

			</view>
		</view>
	</view>

	<view class="mask" v-if="showBox" @click="hideMask" catchtouchmove="false"></view>
	<view class="popUpBox" v-if="showBox">
		<view class="tel">
			<image :src="cosUrl+'images/tel.png'"></image>
		</view>
		<view class="text f30 c3" style="margin-top: 33upx;"> {{$t('客服热线')}}</view>
		<view class="text f30 c3">{{serviceHotline}}</view>
		<view class="button" @click="dail(serviceHotline)">{{$t('拨打电话')}}</view>
		<view class="cancel" @click="hideMask()">
			<u-icon name="close-circle" color="#eee" size="48"></u-icon>
		</view>
	</view>

	<!-- 商品列表 -->
	<u-divider bg-color="#f4f4f4" margin-top="40">
		<h3 class="cardTit">{{$t('猜你喜欢')}} <span class="cardTitbadge">{{$t('精选好货')}}</span> </h3>
	</u-divider>
	<u-waterfall v-model="goodsList" class="u-waterfall" ref="goodsWaterfall">
		<template v-slot:left="{leftList}">
			<view v-for="(item,index) in leftList" :key="index">
				<goodsCard :info="item" class="goodsCard"></goodsCard>
			</view>
		</template>
		<template v-slot:right="{rightList}">
			<view v-for="(item,index) in rightList" :key="index">
				<goodsCard :info="item" class="goodsCard"></goodsCard>
			</view>
		</template>
	</u-waterfall>
	<loadMore :loadingType="loadingType"></loadMore>
	<share-mask ref="shareMask"></share-mask>
	<u-toast ref="uToast" />

	<u-popup mode="center" length="80%" border-radius="20" v-model="isInviteModelShow">
		<div class="invitePanel">
			<u-avatar size="large" :src="inviterInfo.avatar"></u-avatar>
			<p>{{$t('邀请人')}}{{inviterInfo.name}}</p>
			<div class="u-flex u-row-between bottom">
				<span @click="isInviteModelShow=false">{{$t('取消')}}</span>
				<!-- #ifdef MP-WEIXIN -->
				<u-button style="width:50%" size="mini" shape="circle" type="success" lang="zh_CN"
									@click="wechatLogin">{{$t('快捷登录')}}</u-button>
				<!-- #endif -->
			</div>
		</div>
	</u-popup>

</view>
</template>

<script>
import ShareMask from "../../components/shareMask";
import goodsCard from '@/components/goodsCard';
let page = 1
import {
	mapGetters
} from 'vuex';
export default {

	data() {
		return {
			imgStaticUrl: '',
			isLogin: false, //判断是否登陆
			newActive1: false,
			newActive2: false,
			newActive3: false,
			isPay: false, //是否付款
			commentNum: '',
			role: '',
			list: [],
			defaultAvatar: '',
			showBox: 0,
			serviceHotline: '',
			token: '',
			myuserinfo: {},
			wxUserInfo: {},
			myHeadStyle: {},
			cosUrl: '',
			bgheadSrc: '',
			isInviteModelShow: false,
			inviterInfo: {},
			wecode: '',
			avatarUrl: '',
			gender: '',
			nickName: '微信用户',
			inviterID: '',
			goodsList: [],
			loadingType: 0,
			isEditNickname:false,
			wxNickname:''
		}
	},
	components: {
		ShareMask,
		goodsCard
	},

	onShow() {
		this.getUserInfo()
	},
	//小程序分享
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		const myuserinfo = this.myuserinfo
		/**
		 * @param {string} name -  分享人名称
		 * @param {string} avatar -  分享人头像
		 * @param {string} id -  分享人id
		 * @description: 分享小程序携带的参数
		 * @date: 15:57
		 */
		const shareData = {
			name: myuserinfo.user_name,
			avatar: myuserinfo.headimgurl,
			id: myuserinfo.id,
		}
		return {
			title: `${myuserinfo.user_name}${this.$t('邀请您注册')}${this.$AppName}`,
			path: '/pages/tabBar/my?wechatShare=' + JSON.stringify(shareData),
			imageUrl: myuserinfo.headimgurl
		}
	},

	onLoad(data) {
		this.token = uni.getStorageSync('token') || ''
		this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
		// #ifdef APP-PLUS
		const currentWebview = this.$scope.$getAppWebview();
		getCurrentPages()
		// #endif

		// 初始化时获取小程序秘钥code 换取openId  （仅在初始化时获取一次，不要放在事件中重复获取会解密失败）
		// #ifdef MP-WEIXIN

		uni.login({
			provider: "weixin",
			success: loginRes => {
				this.wecode = loginRes.code
			},
			fail: (err) => {
				this.$toast(JSON.stringify(err));
			},
		});
		// #endif

		this.cosUrl = this.STATICURL
		this.bgheadSrc = `url(${this.STATICURL}images/bg-myhead3.jpg)`

		this.getServiceHotline();

		uni.$on('openShareApp', () => {
			this.goShare()
		})
		this.role = uni.getStorageSync('role') || ''; //角色身份
		if (data.wechatShare) {

			this.inviterInfo = JSON.parse(data.wechatShare)
			this.isInviteModelShow = true
		}
		uni.$on('accountLogin', data => {
			console.log("-> data", data);
			this.getUserInfo()
		})

		page = 1
		this.getGoodsList()

	},
	onUnload() {
		uni.$off('openShareApp', () => {})
		uni.$off('accountLogin', () => {})
	},
	computed: {
		...mapGetters([
			'showMutipleShopper'
		]),
		getapplyDistributorBanner() {
			return this.STATICURL + 'images/distribution/bg-applyDistributor.jpg'
		},
		getImgInviteBanner() {
			return this.STATICURL + 'images/distribution/img-invite3.png'
		},
		roleName() {
			return {
				shop: this.$t('商家'),
				user: this.$t('普通用户'),
				service: this.$t('客服'),
			}
		},
		getRankName() {
			return this.myuserinfo.rank_name + this.$t('会员等级')
		},
	},


	onPullDownRefresh() {
		this.getUserInfo()
	},
	watch: {
		"newActive3": function() {
			this.newActive1 = true;
		},
		myuserinfo: {
			handler(val) {
				let bool = Object.keys(val).length
				if (bool !== 0) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			}
		}
	},

	methods: {
    openCompanyWechatService(){
      wx.openCustomerServiceChat({
        extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc6345bfd3a2e3780d'},
        corpId: 'wwacf1ccf0edad2b91',
        success(res) {}
      })
    },
		toEditInfoPage(){
			if(this.isLogin){
				uni.navigateTo({
					url:'/pagesB/setting/userInfo'
				})
			}

		},
		changeNickName(e){
			let nickName = e.detail.value;
			if(!nickName) return;
			this.$loading();
			const data = {
				user_name: nickName
			};
			this.$http.editprofile(data).then(res => {
				if (res.status == 200) {
					this.$toast(res.mess);
					this.$hideLoading()
					this.isEditNickname = false;
				}
			})
		},
		getWechatUserInfo(info){
			let url = this.$baseUrl + 'api/Common/uploadPic';
			const avatarUrl = info.detail.avatarUrl
			console.log("avatarUrl", avatarUrl)
			let _this = this;
			uni.uploadFile({
				url,
				filePath: avatarUrl,
				name: 'file',
				formData:this.$http.returnCommonParams('api/Common/uploadPic', 'usernfo'),
				success (res){
					const {data} = JSON.parse(res.data)
					_this.$loading();
					_this.$http.editprofile( {
						headimgurl: data.path,
					}).then(res => {
						if (res.status == 200) {
							_this.$toast(res.mess);
							_this.$hideLoading()
						}
					})
					console.log('data',data);
					// do something
				}
			})
			console.log('info',info,url);
		},
		toLive(id) {
			uni.setStorage({
				key: 'openLiveID',
				data: id,
				success: function() {
					// #ifndef APP-PLUS
					uni.navigateTo({
						url: '/pagesB/seller/live'
					});
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pagesC/live/Anchor'
					});
					// #endif
				}
			});

		},
		getWebviewPage(){
			this.$u.route({
				url: '/pagesB/webview/web',
				params: {
					url: this.myuserinfo.shopapi_url
				}
			});
		},
		goArticle(url, title) {
			this.$u.route({
				url: url,
				params: {
					title: title
				}
			})
		},
		showPopUpBox() {
			this.showBox = 1;
		},
		hideMask() {
			this.showBox = 0;
		},
		dail(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// #ifdef MP-WEIXIN
		// 微信小程序登录   code换区 小程序openid 和 session_key
		getOpenID() {
			return new Promise((resolve) => {
				this.$http.getWechatMiniProgramOpenid({
					code: this.wecode
				}).then(res => {
					resolve(res.data)

				});
			})
		},
		async wechatLogin() {
			this.inviterID = this.inviterInfo && this.inviterInfo.id
			const {openid='',session_key='',unionid=''} = await this.getOpenID()
			uni.setStorageSync('xcxOpenid', openid); //存取小程序openid
			uni.setStorageSync('xcxSessionKey', session_key);
			this.asyncUserInfo(openid, unionid);
			this.isInviteModelShow = false;

		},
		asyncUserInfo(openid = '', unionid = '') {
			if (openid == '') {
				return false;
			}
			this.$http.thirdLogin({
				oauth: 'weixin_mp',
				openid: openid,
				unionid: unionid,
				nick_name: this.nickName,
				uniongender: this.gender,
				iconurl: this.avatarUrl,
				inviter: this.inviterID
			}).then(result => {
				this.$toast(result.status)
				if (result.status == 200) {
					this.$store.commit('loginStatus', true)
					uni.setStorageSync('token', result.data.token);
					uni.setStorageSync('identity', result.data.identity);
					uni.setStorageSync('role', result.data.role);
					uni.setStorageSync('role_id', result.data.shop_id);
					uni.closeSocket({
						success() {
							console.log('socket关闭成功');
						},
						fail(res) {
							console.log(res);
						}
					})
					setTimeout(() => {
						this.im();
						this.$u.route({
							url: "/pages/tabBar/my",
							type: "reLaunch"
						})
					}, 500);

				}
				if (result.status == 400 || result.data.info == 'unregister') {
					console.log(result)
					this.$u.route({
						url: 'platforms/mp-weixin/miniLogin',
						params: {
							oauth: 'weixin_mp',
							openid: openid,
							unionid: unionid,
							nick_name: this.nickName,
							uniongender: this.gender,
							iconurl: this.avatarUrl,
							inviter: this.inviterID,
						}
					});
				}
			})
		},
		// #endif

		confirm() {

			this.$http.getpanduan().then(res => {

				if (res.status == 200) {
					if (res.data.zhuangtai == 2) { // 进入审核流程状态页
						this.getnav('/pagesC/applyshop/applyStatus')

					} else if (res.data.zhuangtai == 4) {
						this.getnav('/pagesC/loginSon/settingWx')
					} else {
						this.getnav('/pagesC/applyshop/applyType')
					}
				}
			})

		},
		navigateToArticle(url) {
			if (this.isLogin == 1) {
				uni.navigateTo({
					url: '/pagesB/article/detail?title=' + '' + url,
				})
			} else {
				this.$navigateTo('/pagesB/login/login')
			}
		},
		navigateTo(url, type) {

			if (this.isLogin == 1) {
				this.$navigateTo(url)
			} else {
				// #ifndef MP-WEIXIN
				this.$navigateTo('/pagesB/login/login')
				// #endif
				// #ifdef MP-WEIXIN
				this.$navigateTo('/platforms/mp-weixin/miniLogin')
				// #endif
			}

		},
		async goShare() {

			const data = await this.getShareData()
			const mask = this.$refs['shareMask']
			mask.shareTit = data.title; //分享标题
			mask.shareLink = `${data.linkurl}?inviter=${this.myuserinfo.id}`; // 分享参数字段 inviter
			mask.shareText = data.content + mask.shareLink; //分享文字内容
			mask.shareImg = await data.tgimg; //分享图片
			mask.shareModel = true //分享弹窗打开
			// #ifdef MP-WEIXIN
			return false;
			// #endif
		},
		// 获取分享数据
		getShareData() {
			return new Promise((resolve, reject) => {
				this.$http.getShareData().then(res => {
					if (res.status === 200) {
						resolve(res.data)
					} else {
						reject(res)
					}
				})

			})
		},
		getUserInfo() {
			this.$http.getUserInfo().then(res => {
				if (res.status == 200) {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.myuserinfo = res.data;
					this.isLogin = 1;
					// vuex 提交用户信息
					this.$store.commit('setUserInfo', res.data)
				}
			})
		},
		getServiceHotline() {
			this.$http.getserviceHotline().then(res => {
				if (res.status == 200) {
					this.serviceHotline = res.data.serviceHotline;

				}
			})
		},
		// 跳转至订单列表页面
		order(url, data) {
			if (this.isLogin == 1) {
				this.$navigateTo(url, data)
			} else {
				this.$navigateTo('/pagesB/login/login')
			}
		},
		getGoodsList() {
			this.$http.getGoodsList({
				page: page
			}).then(res => {
				if (res.status == 200) {
					if (res.data.length == 0) {
						this.loadingType = 2
						return false
					}
					this.goodsList = [...this.goodsList, ...res.data]
					this.loadingType = 0
				}
			})
		},
		onReachBottom() {
			if (this.loadingType == 1 || this.loadingType == 2) {
				return false
			}
			this.loadingType = 1
			page++
			this.getGoodsList()
		}

	},

}
</script>

<style lang="scss" scoped>
@import '@/static/css/mixins.scss';
@import '~uview-ui/index.scss';

.page {
	padding-bottom: 100upx;
	position: relative;
	.avatar-button{
		background: transparent;
		position: relative;
		top: 8px;
		&::after{
			border: 0;
		}
	}

	.headBg {
		position: absolute;
		width: 100%;
		height: 340upx;
		z-index: -1;
	}

	.shopCart {
		position: fixed;
		bottom: 140upx;
		right: 38upx;
		display: inline-block;
		z-index: 9999;
		animation: breathe 2s infinite;

		.dot {
			padding: 4upx;
			border-radius: 100upx;
			background-color: #FE3536;
			display: inline-block;
			color: #ffffff;
			position: absolute;
			right: -4upx;
			top: -4upx;
			width: 22upx;
			height: 22upx;
			font-size: 20upx;
			text-align: center;
			line-height: 22upx;
		}

		image {
			width: 60upx;

		}

		@keyframes breathe {
			0% {
				transform: scale(1)
			}

			50% {
				transform: scale(1.2)
			}

			100% {
				transform: scale(1)
			}
		}
	}

	.topBar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #fff;
		height: 141upx;
		z-index: 3;
		background-size: cover;

		.nav {
			height: 88upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.text {
				font-size: 36upx;
			}

			.nav-left {
				font-size: 28upx;
				position: absolute;
				right: 32upx;
			}
		}
	}

	.header {
		width: 100%;
		height: 409upx;
		position: absolute;
		left: 0;
		top: 0;
		background-image: linear-gradient(to right, #fa3f3f, #ff6262);
		background-size: cover;

	}

	.top {
		padding: 0;
		position: relative;

		.top-bg {

			display: flex;
			flex-direction: column;
			background-color: #333;
			padding: 76upx 30upx 50upx;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.person {
				display: flex;
				align-items: center;
				padding: 48upx 0;
				justify-content: space-between;

				.person-right {
					display: flex;
					align-items: center;
					width: 100%;

					.avatar {
						/* #ifndef MP-WEIXIN */
						box-shadow: 0 0 0 2rpx #ffefef, 0 0 0 4rpx #ffd0d0;
						/* #endif */
					}
				}

				.rechargeBtn {
					display: inline-block;
					padding: 6upx 24upx;
					background: #fff;
					color: #555;
					border-radius: 100upx;
					display: flex;
					align-items: center;
					box-shadow: 0 0 20upx #e2e3e4;

					.signIn {
						width: 32upx;
						height: 32upx;
						margin-right: 6upx
					}
				}

				.personInfo {
					margin-left: 25upx;
					flex: 1;
					color: #fff;

					.vipBadgeBox {
						display: inline-block;
						padding: 0 10upx;
						background: linear-gradient(to right, #ffa468, #fa3f3f);
						border-radius: 100px;
						color: #fff;
						font-weight: 600;
						text-align: center;

						.vipBadge {
							display: inline-block;
							width: 36upx;
							height: 36upx;
							font-size: 10px;
							border-radius: 200px;
							background-color: #ffa468;
							box-shadow: inset 0 4px 4px #ffa468;
							padding: 4upx;
							border: 5upx solid #ff771e;
							margin-right: 8upx
						}
					}

					.name {
						font-size: 38upx;
						font-weight: 500;
						display: flex;
					}

				}

				.login {
					margin-left: 16upx;
					font-weight: 500;
					font-size: 34upx;
				}
			}

			.menus {
				flex: 1;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-top: 16upx;

				.item {
					text-align: center;
					flex: 1;

					.volum {
						position: relative;
						line-height: 37upx;
						font-weight: 500;
						font-size: 28upx;

						.markDot {
							width: 12upx;
							height: 12upx;
							background: red;
							border-radius: 200upx;
							position: absolute;
							top: -4upx;
						}
					}

					.label {
						line-height: 37upx;
						margin-top: 8upx;
					}
				}
			}
		}
	}

	.box {

		position: relative;
		box-shadow: 0 0 20upx #ebeef3;
		padding: 0;
		margin: 0 20rpx;
		width: 710rpx;

		.innerBox {
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;

			.order-title {
				display: flex;
				justify-content: space-between;
				height: 70rpx;
				margin-top: 6rpx;

				.left {
					font-size: 26rpx;
					font-weight: bold;
				}

				.right {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.tools {
				padding-bottom: 0;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.titleLeft {
					line-height: 40upx;
					font-weight: 600
				}

				.titleRight {
					display: flex;
					align-items: center;

					.more {
						margin-left: 12upx;
					}
				}

			}

			.Orderlist {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.orderMarkNum {
						position: absolute;
						top: -6upx;
						right: -12upx;
						background-color: #F95658;
						color: #ffffff;
						width: 26upx;
						height: 26upx;
						text-align: center;
						line-height: 26upx;
						border-radius: 100upx;
						font-size: 20upx;
						z-index: 99;
					}

					.icon {
						width: 56upx;
						height: 56upx;
						position: relative;

						image {
							width: 56upx;
							height: 56upx;
						}
					}

					.text {
						line-height: 33upx;
						margin-top: 6upx;
					}

				}
			}

			.toolsList {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 24upx;

				.toolsItem {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 28upx;
					position: relative;

					.payNote {
						position: absolute;
						top: -16upx;
						right: -16upx;
						background-color: #FA3E3F;
						border-radius: 200upx;
						border-bottom-left-radius: 0;
						padding: 0px 12upx;
						font-size: 20upx;
						color: #FFFFFF;

					}

					.icon {
						width: 64upx;
						height: 64upx;
						border-radius: 100px;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						line-height: 33upx;
						margin-top: 16upx;
					}
				}
			}
		}
	}

	.tabs {
		display: flex;
		margin: 20upx 0;
		padding: 0 32upx;
		justify-content: space-between;

		.tabItem {
			position: relative;

			&:first-child {
				.bg {
					width: 328upx;
					height: 246upx;
				}

				.innerContent {
					.title {
						color: #C89D40;
					}

					.descripe {
						color: #C89D40;
						width: 204upx;
					}
				}
			}

			&:last-child {
				.bg {
					width: 330upx;
					height: 248upx;
				}

				.innerContent {
					.title {
						color: #92AFD4;

					}

					.descripe {
						color: #92AFD4;
						width: 190upx;
					}
				}
			}

			.innerContent {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				padding: 28upx;

				.title {
					line-height: 40upx;
					padding-top: 22upx;
					padding-bottom: 25upx;
					font-weight: bold;
				}

				.descripe {
					line-height: 33upx;
				}

				.viewMore {
					display: flex;
					justify-content: flex-end;

					.icon {
						width: 44upx;
						height: 44upx;
					}
				}
			}
		}
	}

	.mask {
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 4;
	}

	.popUpBox {
		position: fixed;
		width: 402upx;
		height: 452upx;
		background: #fff;
		z-index: 999;
		border-radius: 20upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.tel {
			text-align: center;
			margin-top: -25upx;

			image {
				width: 174upx;
				height: 174upx;
			}
		}

		.text {
			line-height: 43upx;
			font-weight: bold;
			text-align: center;
		}

		.button {
			width: 247upx;
			height: 66upx;
			border-radius: 45upx;
			position: absolute;
			bottom: 36upx;
			left: 50%;
			transform: translate(-50%, 0)
		}

		.cancel {
			width: 53upx;
			height: 53upx;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -75upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.wechatLoginBtn {
	font-size: 24upx;
	border: none;
	color: #fff;
	background-image: linear-gradient(to right, #ffa468, #fa3f3f);
	border-radius: 200upx;
	margin-left: 20upx
}

.iconWrap {
	display: flex;
	align-items: center;
	font-size: 28upx;

	.setting {
		width: 36upx;
		height: 36upx;
	}
}

.loginWrap {
	padding-top: 90upx;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 999;
	text-align: center;

	.tips {
		color: #999
	}

	.login {
		background: #ffd400;
		padding: 15upx 100upx;
		font-size: 32upx;
		margin-top: 30upx;
		display: inline-block;
	}
}

.userName {
	font-weight: 600;
	font-size: 32upx;
}

.distribution {
	background-color: #fff;
	border-radius: 16upx;
	padding: 15upx 0;
}

.swiperBox {
	margin: 12upx 30upx;
}

.distributorWrap {

	padding: 10upx 30upx;

	.inviteBtn {
		background-color: transparent;

		&::after {
			border: none;
		}
	}
}

.topPanelWrap {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 20upx;
	color: #fff;

	.topPanelNum {
		font-size: 32upx;
		font-weight: 800;
	}
}

.topPanelWrap {
	display: flex;
}

.integralBox {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 20upx 30upx;
	margin: -35upx 20upx 15upx;
	border-radius: 20upx;
	z-index: 1;
	position: relative;

	&title {
		font-size: 30upx;
	}

	&item {
		position: relative;
		flex: 1;

	}

	&icon {
		position: absolute;
		top: 50%;
		right: 28upx;
		transform: translateY(-50%);
	}

	&tip {
		color: #a6aaad;
		font-size: 24upx;
	}
}

.invitePanel {
	text-align: center;
	padding: 50upx 20upx;
	background-color: #ffffff;

	.bottom {
		margin-top: 50upx;

		span {
			width: 50%;
			text-align: center;

			&:first-child {
				color: #7b7b7b
			}

			&:nth-child(2) {
				color: #19be6b
			}
		}
	}
}

.cardTit {
	width: 100%;
	color: #444;
	display: flex;
	justify-content: center;
	align-items: center;

	.cardTitbadge {
		background-color: #ff4444;
		color: #fff;
		font-size: 10px;
		display: inline-flex;
		align-items: center;
		height: 32rpx;
		font-weight: normal;
		border-radius: 6rpx;
		margin-left: 10rpx;
		padding: 2rpx 8rpx;
		border-top-right-radius: 14rpx;
		border-bottom-left-radius: 14rpx;
	}
}

/deep/.u-waterfall {
	width: 730rpx;
	margin: 0 10rpx;
	/* #ifndef MP-WEIXIN */
	margin-top: 30rpx;
	/* #endif */
}
</style>
